<!-- 航线规划工具组件 -->
<template>
  <div class="route-controller">
    <div class="controller-header">
      <h3 class="header-title">
        <el-icon><Navigation /></el-icon>
        航线规划
      </h3>
    </div>
    
    <div class="control-panel">
      <div class="mode-selector">
        <el-button-group class="mode-buttons">
          <el-button
            :type="currentMode === 'ship' ? 'primary' : ''"
            @click="setMode('ship')"
            :disabled="isPlanning"
          >
            <el-icon><Ship /></el-icon>
            舰船
          </el-button>
          <el-button
            :type="currentMode === 'aircraft' ? 'primary' : ''"
            @click="setMode('aircraft')"
            :disabled="isPlanning"
          >
            <el-icon><Aim /></el-icon>
            战机
          </el-button>
        </el-button-group>
      </div>
      
      <div class="planning-controls">
        <el-button
          type="primary"
          :loading="isPlanning"
          @click="startPlanning"
          :disabled="isPlanning"
          class="control-btn"
        >
          <el-icon><Position /></el-icon>
          开始规划
        </el-button>
        
        <el-button
          type="success"
          @click="finishPlanning"
          :disabled="!isPlanning || routePoints.length < 2"
          class="control-btn"
        >
          <el-icon><Check /></el-icon>
          完成路径
        </el-button>
        
        <el-button
          type="warning"
          @click="cancelPlanning"
          :disabled="!isPlanning"
          class="control-btn"
        >
          <el-icon><Close /></el-icon>
          取消规划
        </el-button>
      </div>
      
      <div class="route-info" v-if="isPlanning">
        <div class="info-card">
          <div class="info-item">
            <span class="info-label">规划模式:</span>
            <span class="info-value">{{ modeText }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">航路点:</span>
            <span class="info-value">{{ routePoints.length }} 个</span>
          </div>
          <div class="info-item" v-if="routeDistance > 0">
            <span class="info-label">总距离:</span>
            <span class="info-value">{{ routeDistance.toFixed(2) }} km</span>
          </div>
        </div>
        
        <div class="planning-tips">
          <el-alert
            title="规划提示"
            type="info"
            :closable="false"
            show-icon
          >
            <template #default>
              <p>• 在地图上点击添加航路点</p>
              <p>• 右键删除最近的点</p>
              <p>• 至少需要2个点完成路径</p>
            </template>
          </el-alert>
        </div>
      </div>
      
      <div class="route-settings" v-if="!isPlanning && savedRoutes.length > 0">
        <h4 class="settings-title">已保存路径</h4>
        <div class="route-list">
          <div
            v-for="route in savedRoutes"
            :key="route.id"
            class="route-item"
          >
            <div class="route-header">
              <el-icon v-if="route.type === 'ship'"><Ship /></el-icon>
              <el-icon v-else><Aim /></el-icon>
              <span class="route-name">{{ route.name }}</span>
            </div>
            <div class="route-actions">
              <el-button size="small" type="primary" link @click="loadRoute(route)">
                加载
              </el-button>
              <el-button size="small" type="danger" link @click="deleteRoute(route.id)">
                删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Ship, Aim, Position, Check, Close } from '@element-plus/icons-vue'

const emit = defineEmits(['startPlanning', 'finishPlanning', 'cancelPlanning', 'loadRoute'])

const currentMode = ref('ship')
const isPlanning = ref(false)
const routePoints = ref([])
const routeDistance = ref(0)
const savedRoutes = ref([
  {
    id: 1,
    name: '巡逻路径A',
    type: 'ship',
    points: [[120.0, 35.0], [121.0, 35.5], [122.0, 36.0]],
    distance: 145.2
  },
  {
    id: 2,
    name: '空中巡逻',
    type: 'aircraft',
    points: [[119.0, 34.0], [120.0, 35.0], [121.0, 36.0]],
    distance: 223.8
  }
])

const modeText = computed(() => {
  return currentMode.value === 'ship' ? '舰船航线' : '战机航线'
})

const setMode = (mode) => {
  currentMode.value = mode
}

const startPlanning = () => {
  isPlanning.value = true
  routePoints.value = []
  routeDistance.value = 0
  emit('startPlanning', currentMode.value)
  ElMessage.info(`已进入${modeText.value}规划模式`)
}

const finishPlanning = () => {
  if (routePoints.value.length < 2) {
    ElMessage.warning('至少需要两个航路点才能完成路径规划')
    return
  }
  
  const newRoute = {
    id: Date.now(),
    name: `${modeText.value}_${new Date().toLocaleTimeString()}`,
    type: currentMode.value,
    points: [...routePoints.value],
    distance: routeDistance.value
  }
  
  savedRoutes.value.push(newRoute)
  
  emit('finishPlanning', {
    mode: currentMode.value,
    points: routePoints.value,
    distance: routeDistance.value
  })
  
  isPlanning.value = false
  ElMessage.success('路径规划完成！')
}

const cancelPlanning = () => {
  isPlanning.value = false
  routePoints.value = []
  routeDistance.value = 0
  emit('cancelPlanning')
  ElMessage.info('已取消路径规划')
}

const loadRoute = (route) => {
  emit('loadRoute', route)
  ElMessage.success(`已加载路径: ${route.name}`)
}

const deleteRoute = (routeId) => {
  const index = savedRoutes.value.findIndex(r => r.id === routeId)
  if (index > -1) {
    savedRoutes.value.splice(index, 1)
    ElMessage.success('路径已删除')
  }
}

// 暴露方法给父组件
defineExpose({
  addRoutePoint: (point) => {
    if (isPlanning.value) {
      routePoints.value.push(point)
      // 简单距离计算 (实际应用中需要更精确的地理距离计算)
      if (routePoints.value.length > 1) {
        const lastPoint = routePoints.value[routePoints.value.length - 2]
        const currentPoint = point
        const distance = Math.sqrt(
          Math.pow(currentPoint[0] - lastPoint[0], 2) + 
          Math.pow(currentPoint[1] - lastPoint[1], 2)
        ) * 111 // 粗略转换为公里
        routeDistance.value += distance
      }
    }
  },
  removeLastPoint: () => {
    if (isPlanning.value && routePoints.value.length > 0) {
      routePoints.value.pop()
    }
  },
  getCurrentMode: () => currentMode.value,
  getIsPlanning: () => isPlanning.value
})
</script>

<style scoped>
.route-controller {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.controller-header {
  padding: 1.2vh 1.5vw;
  border-bottom: 1px solid #2d3a4b; /* 深色边框 */
  background: linear-gradient(135deg, #1f2d3d, #263445); /* 深色渐变 */
}

.header-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #67C23A; /* 成功色 */
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.control-panel {
  flex: 1;
  padding: 1.5vh 1.5vw;
  overflow-y: auto;
  background: #263445; /* 深色背景 */
}

.mode-selector {
  margin-bottom: 2vh;
}

.mode-buttons {
  width: 100%;
}

.mode-buttons .el-button {
  flex: 1;
  height: 4vh;
  font-size: 0.9rem;
}

.planning-controls {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  margin-bottom: 2vh;
}

.control-btn {
  width: 100%;
  height: 4vh;
  font-size: 0.9rem;
}

.route-info {
  margin-bottom: 2vh;
}

.info-card {
  background: #1f2d3d; /* 深色背景 */
  border-radius: 0.8vh;
  padding: 1.5vh;
  margin-bottom: 1.5vh;
  border-left: 0.4vw solid #409EFF; /* 主题色左边框 */
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8vh;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 0.85rem;
  color: #8591a3; /* 深色主题次要文字 */
}

.info-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: #bfcbd9; /* 深色主题文字 */
}

.planning-tips {
  margin-top: 1.5vh;
}

.planning-tips :deep(.el-alert) {
  background: rgba(64, 158, 255, 0.1) !important; /* 半透明主题色背景 */
  border: 1px solid rgba(64, 158, 255, 0.3) !important; /* 半透明主题色边框 */
  color: #bfcbd9 !important; /* 深色主题文字 */
}

.planning-tips :deep(.el-alert__content) {
  font-size: 0.8rem;
}

.planning-tips p {
  margin: 0.3vh 0;
  color: #bfcbd9 !important; /* 深色主题文字 */
}

.route-settings {
  background: #1f2d3d; /* 深色背景 */
  border-radius: 0.8vh;
  padding: 1.5vh;
}

.settings-title {
  margin: 0 0 1vh 0;
  font-size: 1rem;
  font-weight: 500;
  color: #bfcbd9; /* 深色主题文字 */
}

.route-list {
  max-height: 30vh;
  overflow-y: auto;
}

.route-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh;
  border: 1px solid #2d3a4b; /* 深色边框 */
  border-radius: 0.6vh;
  margin-bottom: 0.8vh;
  background: #263445; /* 深色背景 */
  transition: all 0.3s ease;
}

.route-item:hover {
  border-color: #409EFF; /* 主题色边框 */
  background: rgba(64, 158, 255, 0.1); /* 半透明主题色背景 */
}

.route-header {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.route-name {
  font-size: 0.85rem;
  color: #bfcbd9; /* 深色主题文字 */
}

.route-actions {
  display: flex;
  gap: 0.5vw;
}

/* Element Plus 组件深色主题覆盖 */
:deep(.el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-input__inner) {
  background: #263445 !important;
  color: #bfcbd9 !important;
}

:deep(.el-select .el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

:deep(.el-input__inner::placeholder) {
  color: #8591a3 !important;
}

:deep(.el-input__wrapper:focus),
:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset !important;
}
</style>